<script setup>
import { showSuccessToast, showFailToast } from 'vant';
import { ref } from 'vue';
const pattern = /^1[3-9]\d{9}$/
const name = ref('')
const phone = ref('');
const password = ref('');
const password2 = ref('');
const sms = ref('')
import router from '../router/index.ts'
const onClickLeft = () => {
    router.push('/login')
};
const onSubmit = async (values) => {
    console.log('submit', values);
    if (password.value !== password2.value) {
        showFailToast('两次密码不一致')
        return
    } else {
        if (sms.value !== '2245') {
            showFailToast('验证码错误')
            return
        } else {
            const res = await register(values)
            if (res.data.code === 1) {
                showSuccessToast('注册成功')
                router.push('/login')
            } else {
                showFailToast(res.data.msg)
            }

        }
    }
}
import { getSms, register } from '../apis/user.js'
async function getsms() {
    const res = await getSms()
    showSuccessToast(res.data.data)
}

</script>
<template>
      <van-nav-bar title="注册" left-text="返回"  left-arrow @click-left="onClickLeft"/>
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field label="昵称" placeholder="请输入昵称" v-model="name" name="name"
                :rules="[{ required: true, message: '请输入昵称' }]" />
            <!-- 通过 pattern 进行正则校验 -->
            <van-field label="手机号" placeholder="请输入手机号" v-model="phone" name="phone"
                :rules="[{ pattern, message: '请输入正确手机号' }]" />

            <!-- 通过 pattern 进行正则校验 -->
            <van-field label="密码" type="password" placeholder="请输入密码" v-model="password" name="password"
                :rules="[{ required: true, message: '请输入密码' }]" />
            <!-- 通过 pattern 进行正则校验 -->
            <van-field label="确认密码" type="password" placeholder="请再次输入密码" v-model="password2" name="password2"
                :rules="[{ required: true, message: '请再次输入密码' }]" />


            <van-field v-model="sms" name="ssm" center clearable label="短信验证码" placeholder="请输入短信验证码"
                :rules="[{ required: true, message: '请输入验证码' }]">
                <template #button>
                    <van-button size="small" type="primary" @click="getsms()">发送验证码</van-button>
                </template>
            </van-field>


        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                注册
            </van-button>
        </div>
    </van-form>

</template>